<template>
  <div class="login-box">

    <el-card class="login-form">
      <el-container>
        <el-header style="text-align:center;
                          height: 70px">
          <el-row>
            <el-col :span="12">
              <el-link @click="login_way='login_with_phone'">
                <strong >免密登录</strong>
              </el-link>
            </el-col>
            <el-col :span="12">
              <el-link @click="login_way='login_with_account'">
                <strong >密码登录</strong>
              </el-link>
            </el-col>
          </el-row>
          <el-divider></el-divider>
        </el-header>
        <el-main>

          <el-card>
            <el-form v-if="login_way==='login_with_phone'" ref="form" :model="loginForm" label-width="80px">
              <span>手机号：</span>
              <el-input v-model="loginForm.phone"
                        style="width: 200px"
                        placeholder="请输入手机号"></el-input>
              <el-input v-model="loginForm.phone_code"
                        style="width: 150px;margin-top: 20px"
                        placeholder="请输入手机号"></el-input>
              <span>&emsp;<el-link href="#">获取验证码</el-link></span>
            </el-form>
            <el-form v-if="login_way==='login_with_account'" ref="form" :model="loginForm" label-width="80px">
              <span>账号：</span>
              <el-input v-model="loginForm.loginName"
                        style="width: 200px"
                        placeholder="请输入账号"></el-input>
              <br>
              <span>密码：</span>
              <el-input v-model="loginForm.password"
                        type="password"
                        style="width: 200px;margin-top: 20px"
                        placeholder="请输入密码"></el-input>
            </el-form>
          </el-card>

          <div>
            <el-link href="#">没有账号？注册新账号</el-link>
          </div>
          <el-button
              @click="login"
              style="margin-left: 90px;
                          width: 150px;
                          margin-top: 30px;
                          margin-bottom: 20px;
                          ">登录
          </el-button>

          <el-checkbox v-model="checked"><font size="1px">我已阅读并且同意靠谱《用户协议》和《隐私政策》</font></el-checkbox>
        </el-main>
      </el-container>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      // 这是登录表单的数据绑定对象
      loginForm: {
        loginName: '1',
        password: '1',
        phone: '123456789',
        phone_code: '1234'
      },
      // flag: false
      login_way:'login_with_phone',
      checked:true
    }
  },
  methods: {
    async login() {
      console.log('用户登录')
      const {data: res} = await this.$http.post(
          process.env.VUE_APP_SERVER + 'user/login',
          this.loginForm)
      console.log(res.message)
      if (res.message==="success"){
        console.log(res.data)
        console.log('登录成功')
        SessionStorage.set(SESSION_KEY_LOGIN_MEMBER, res.data);
        this.$router.push({path:'/person'})
      }
    }
  }
}
</script>

<style scoped>

.login-form {
  width: 400px;
  height: 475px;
  margin-left: 690px;
}

.login-box {
  padding-top: 65px;
  background: url('https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2883480529,3855223479&fm=26&gp=0.jpg') no-repeat;
  width: 1200px;
  height: 545px;
  background-size: 100% 100%;
}
</style>